{% block sw_datepicker %}
<sw-contextual-field
    class="sw-field--datepicker"
    :class="{ 'has--focus': isDatepickerOpen }"
    v-bind="{
        ...additionalAttrs,
        ...inheritanceAttrs
    }"
    :required="required"
    :name="formFieldName"
    :disabled="disabled"
    @sw-contextual-field-suffix-clicked="openDatepicker"
    @inheritance-restore="$emit('inheritance-restore', $event)"
    @inheritance-remove="$emit('inheritance-remove', $event)"
    @base-field-mounted="createFlatpickrInstance"
>

    <template #sw-field-input="{ identification, disabled }">
        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
        <input
            :id="identification"
            ref="flatpickrInput"
            type="text"
            :name="identification"
            :disabled="disabled"
            :placeholder="placeholderText"
        >
        <mt-icon
            v-if="!required && timezoneFormattedValue && !disabled"
            class="sw-field--datepicker__button-reset-value"
            name="regular-times-xs"
            @click="unsetValue"
        />
    </template>

    <template
        v-if="showTimeZoneHint"
        #hint
    >
        <mt-icon
            name="solid-clock"
            size="12px"
        />
        {{ timeZoneHint }}
    </template>

    <template #sw-contextual-field-suffix>
        <mt-icon
            :name="suffixName"
            size="16px"
            @click.stop="openDatepicker"
        />
    </template>

    <template #label>
        <slot name="label"></slot>
    </template>
</sw-contextual-field>
{% endblock %}
